<template>
  <!-- 公用的消息对话框组件 zhu: 类似于element的messageBox -->
  <div class="messageBox__wrapper" v-show="visible" @click.self="handleClose">
    <div class="messageBox">
      <div class="messageBox__header" v-if="title"
        :style="{'border-bottom': headerBorderBottom ? '1px solid #e8e8e8' : 'none', 'padding-top': headerPaddingVertical/75 + 'rem', 'padding-bottom': headerPaddingVertical/75 + 'rem'}">
        <slot name="title">
          <span class="messageBox__title">{{title}}</span>
        </slot>
      </div>
      <div class="messageBox__body">
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <div class="messageBox__footer" v-if="type == 'confirm'">
        <div class="cancelBtn comDialog_footer_Btn lusir-common_cursor" @click="handleCloseDialog">取消</div>
        <div class="confirmBtn comDialog_footer_Btn lusir-common_cursor" @click="handleConfirmDialog">确认</div>
      </div>
      <div class="messageBox__footer" v-else-if="type == 'alert'">
        <div class="closeBtn comDialog_footer_Btn lusir-common_cursor" @click="handleCloseDialog">关闭</div>
      </div>
      <div class="messageBox__footer" v-else-if="type == 'prompt'">
        <div class="closeBtn comDialog_footer_Btn lusir-common_cursor" @click="handleCloseDialog">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lusirDialog",
  props: {
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "confirm", // confirm确认消息   alert消息提示   prompt提交内容
    },
    visible: {
      type: Boolean,
      default: false
    },
    headerBorderBottom: { // 头部是否需要下边框
      type: Boolean,
      default: false
    },
    headerPaddingVertical: {
      type: Number,
      default: 40
    },
  },
  created() {
  },
  methods: {
    handleCloseDialog() {
      this.$emit("cancel", false);
    },
    handleConfirmDialog() {
      this.$emit("confirm", false);
    }
  }
};
</script>

<style scpoed lang="stylus">
.messageBox__wrapper
  position fixed
  width 100vw
  height 100vh
  z-index 2001
  left 0
  top 0
  background rgba(0, 0, 0, 0.48)
  .messageBox
    position fixed
    left 50%
    top 50%
    transform translate(-50%, -50%)
    background-color #fff
    width 7.47rem
    border-radius 0.21rem
    overflow hidden
    .messageBox__header
      padding 0.53rem 0.32rem
      font-size 0.4rem
      text-align center
      color #333333
      line-height 0.56rem
      .messageBox__title
        font-weight bold
    .messageBox__footer
      height 1.31rem
      display flex
      align-items center
      justify-content center
      border-top 1px solid #e5e5e5
      .comDialog_footer_Btn
        display flex
        justify-content center
        align-items center
        color #1677ff
        font-size 0.48rem
        height 1.31rem
        box-sizing border-box
        width 50%
      .closeBtn
        font-size 0.48rem
        color #1677ff
        display flex
        align-items center
        justify-content center
      .cancelBtn
        border-right 1px solid #e5e5e5
      .confirmBtn
        font-weight 600
        background #fff
        border none
      .confirmBtn::after
        border none
</style>
